<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--秒杀详情页</title>
    <link rel="icon" href="/assets/img/favicon.ico">


    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-zoom.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-seckill-item.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
</head>
<script type="text/javascript">


</script>
<style type="text/css">
    .goods-intro-list li {
        display: inline-block;
        width: 300px;
    }

    .Ptable {
        margin: 10px 0;
    }

    .Ptable-item {
        padding: 12px 0;
        line-height: 220%;
        color: #999;
        font-size: 12px;
        border-bottom: 1px solid #eee;
    }

    .Ptable-item h3 {
        width: 110px;
        text-align: right;
    }

    .Ptable-item h3, .package-list h3 {
        font-weight: 400;
        font-size: 12px;
        float: left;
    }

    h3 {
        display: block;
        font-size: 1.17em;
        -webkit-margin-before: 1em;
        -webkit-margin-after: 1em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        font-weight: bold;
    }

    .Ptable-item dl {
        margin-left: 110px;
    }

    dl {
        display: block;
        -webkit-margin-before: 1em;
        -webkit-margin-after: 1em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
    }

    .Ptable-item dt {
        width: 160px;
        float: left;
        text-align: right;
        padding-right: 5px;
    }

    .Ptable-item dd {
        margin-left: 210px;
    }

    dd {
        display: block;
        -webkit-margin-start: 40px;
    }

    .package-list {
        padding: 12px 0;
        line-height: 220%;
        color: #999;
        font-size: 12px;
        margin-top: -1px;
    }

    .package-list h3 {
        width: 130px;
        text-align: right;
    }

    .package-list p {
        margin-left: 155px;
        padding-right: 50px;
    }
</style>

<body>

<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div id="nav-bottom"></div>
<script type="text/javascript">$("#nav-bottom").load("top.html");</script>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
<script type="text/javascript" src="js/plugins/jquery.jqzoom/zoom.js"></script>
<script type="text/javascript">
    $(function () {
        $("ul.btn-choose li a.btn-xlarge").click(function () {
            alert("钻中");
        });
        $("#star").click(function () {
            alert("关注成功");
        })
    })
</script>
</body>
<div class="py-container">
    <div id="item">
        <div class="crumb-wrap">
            <ul class="sui-breadcrumb">

            </ul>
        </div>
        <!--product-info-->
        <div class="product-info">
            <div class="fl preview-wrap">
                <!--放大镜效果-->
                <div class="zoom">
                    <!--默认第一个预览-->
                    <div id="preview" class="spec-preview">
							<span class="jqzoom">
								<img :src="seckill.sku.images" :jqimg="seckill.sku.images" width="400px"
                                     height="400px"/>
							</span>
                    </div>
                </div>

            </div>
            <div class="fr itemInfo-wrap">
                <div class="sku-name">
                    <h4>{{seckill.sku.title}}</h4>
                </div>
                <div class="news">
                    <span><img src="img/_/clock.png"/>品优秒杀</span>
                    <span class="overtime">
							<span v-if="t>0 && start<0">距离结束:</span>
                            <span v-if="start>0">距离开始：</span>
							<span id="t_d">00</span>天
							<span id="t_h">00</span>:
							<span id="t_m">00</span>:
							<span id="t_s">00</span>
						</span>

                </div>
                <div class="summary">
                    <div class="summary-wrap">

                        <div class="fl title">
                            <i>秒杀价</i>
                        </div>
                        <div class="fl price">
                            <i>¥</i>
                            <em>{{ly.formatPrice(seckill.seckPrice)}}</em>
                            <span>原价：{{ly.formatPrice(seckill.sku.price)}}</span>
                        </div>
                        <div class="fr remark">

                        </div>
                    </div>
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>促　　销</i>
                        </div>
                        <div class="fl fix-width">
                            <i class="red-bg">加价购</i>
                            <em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
                        </div>
                    </div>
                </div>
                <div class="support">
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>支　　持</i>
                        </div>
                        <div class="fl fix-width">
                            <em class="t-gray">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em>
                        </div>
                    </div>
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>配 送 至</i>
                        </div>
                        <div class="fl fix-width">
                            <em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
                        </div>
                    </div>
                </div>
                <div class="clearfix choose">


                    <div class="summary-wrap">
                        <div class="fl title">

                        </div>
                        <div class="fl">
                            <ul class="btn-choose unstyled">
                                <li v-if="t>0 && start<0">
                                    <a @click="flashSale" href="javascript:void(0)" target="_blank"
                                       class="sui-btn  btn-danger addshopcar">
                                        立即抢购
                                    </a>
                                </li>
                                <li v-if="start>0">
                                    <a href="javascript:void(0)" target="_blank" class="sui-btn  btn-danger addshopcar">
                                        敬请期待
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--product-detail-->
        <div class="clearfix product-detail">
            <div class="fl aside">
                <div class="shop">
                    <span class="fl">三星旗舰店</span><span class="fr"><a href="shop.html" target="_blank"
                                                                     class="sui-btn btn-bordered btn-danger">进入店铺</a></span>
                </div>
                <div class="clearfix"></div>
                <ul class="sui-nav nav-tabs tab-wraped">
                    <li class="active">
                        <a href="#index" data-toggle="tab">
                            <span>相关分类</span>
                        </a>
                    </li>
                    <li>
                        <a href="#profile" data-toggle="tab">
                            <span>推荐品牌</span>
                        </a>
                    </li>
                </ul>
                <div class="tab-content tab-wraped">
                    <div id="index" class="tab-pane active">
                        <ul class="part-list unstyled">
                            <li>手机</li>
                            <li>手机壳</li>
                            <li>内存卡</li>
                            <li>Iphone配件</li>
                            <li>贴膜</li>
                            <li>手机耳机</li>
                            <li>移动电源</li>
                            <li>平板电脑</li>
                        </ul>
                        <ul class="goods-list unstyled">
                            <li>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/part01.png"/>
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/part02.png"/>
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/part03.png"/>
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/part02.png"/>
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/part03.png"/>
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div id="profile" class="tab-pane">
                        <p>推荐品牌</p>
                    </div>
                </div>
            </div>
            <div class="fr detail">

                <div class="tab-main intro">
                    <ul class="sui-nav nav-tabs tab-wraped">
                        <li class="active">
                            <a href="#one" data-toggle="tab">
                                <span>商品介绍</span>
                            </a>
                        </li>
                        <li>
                            <a href="#two" data-toggle="tab">
                                <span>规格与包装</span>
                            </a>
                        </li>
                        <li>
                            <a href="#three" data-toggle="tab">
                                <span>售后保障</span>
                            </a>
                        </li>
                        <li>
                            <a href="#four" data-toggle="tab">
                                <span>商品评价</span>
                            </a>
                        </li>
                        <li>
                            <a href="#five" data-toggle="tab">
                                <span>手机社区</span>
                            </a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="tab-content tab-wraped">
                        <div id="one" class="tab-pane active">
                            <ul class="goods-intro unstyled">
                                <li v-for="(v,k,i) in paramList">{{k}}:{{v}}</li>
                            </ul>
                            <div class="intro-detail">
                                <img src="img/_/intro01.png"/>
                                <img src="img/_/intro02.png"/>
                                <img src="img/_/intro03.png"/>
                            </div>

                        </div>
                        <div id="two" class="tab-pane">
                            <div class="Ptable">
                                <div class="Ptable-item" v-for="group in groups">
                                    <h3>{{group.name}}</h3>
                                    <dl v-for="(p,i) in group.params">
                                        <dt>{{p.name}}</dt>
                                        <dd>{{paramList[p.name]}}</dd>
                                    </dl>
                                </div>
                                <div class="package-list">
                                    <h3>包装清单</h3>
                                    <p>{{spuDetail.packingList}}</p>
                                </div>
                            </div>
                        </div>
                        <div id="three" class="tab-pane">
                            <p>{{spuDetail.afterService}}</p>
                        </div>
                        <div id="four" class="tab-pane">
                            <p>商品评价</p>
                        </div>
                        <div id="five" class="tab-pane">
                            <p>手机社区</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>


<script type="text/javascript">

    var vm = new Vue({
        el: "#item",
        data: {
            ly,
            seckillparams: [],
            skuid: Number,
            total: {},
            paramMap: {},
            seckill: {},
            groups: [],
            spu: {},
            spuDetail: {},
            t: Number,
            start: Number
        },
        created() {
            this.loadData();
            const taskId = setInterval(() => {
                this.set()
            }, 1000);
        },
        methods: {
            //立即抢购
            flashSale() {
                //验证登录信息
                ly.verifyUser().then(res => {
                    ly.http.post("/cart", {
                        skuId: this.seckill.skuId,
                        num: 1,
                        limitNum: this.seckill.limitNum,
                        price: seck.seckPrice
                    }).then(res => {
                        window.location.href = "http://www.leyou.com/cart.html?returnUrl=" + location.href;
                    })
                }).catch(() => {
                    //未保存登录的.购物车保存在本地localhost中
                    const carts = ly.store.get("carts") || [];
                    const cart = {
                        skuId: this.seckill.skuId,
                        title: this.seckill.sku.title,
                        price: this.seckill.seckPrice,
                        image: this.seckill.sku.images,
                        num: 1,
                        ownSpec: this.seckill.sku.ownSpec,
                        limitNum: this.seckill.limitNum
                    }
                    carts.push(cart);
                    //把cart回写到localstorage
                    ly.store.set("carts", carts);
                    // 跳转
                    window.location.href = "http://www.leyou.com/cart.html?returnUrl=" + location.href;
                })
            },
            loadData() {
                this.skuid = ly.getUrlParam("skuid");
                ly.http.get("/item/queryseckparams/" + this.skuid).then(res => {
                    this.total = res.data
                    this.paramMap = this.total.paramMap
                    this.seckill = this.total.seckill
                    this.groups = this.total.specGroups
                    this.spu = this.total.spu
                    this.spuDetail = this.total.spuDetail
                })
            },
            GetRTime() {

                var EndTime = new Date(this.seckill.endTime);  //结束时间
                var StartTime = new Date(this.seckill.startTime);  //开始时间
                var NowTime = new Date();
                var t = EndTime.getTime() - NowTime.getTime();
                this.t = t
                var start = StartTime.getTime() - NowTime.getTime();
                this.start = start
                var d = 0;
                var h = 0;
                var m = 0;
                var s = 0;
                var Sd = 0;
                var Sh = 0;
                var Sm = 0;
                var Ss = 0;
                if (t >= 0) {
                    d = Math.floor(t / 1000 / 60 / 60 / 24);
                    h = Math.floor(t / 1000 / 60 / 60 % 24);
                    m = Math.floor(t / 1000 / 60 % 60);
                    s = Math.floor(t / 1000 % 60);
                }
                if (start >= 0) {
                    Sd = Math.floor(start / 1000 / 60 / 60 / 24);
                    Sh = Math.floor(start / 1000 / 60 / 60 % 24);
                    Sm = Math.floor(start / 1000 / 60 % 60);
                    Ss = Math.floor(start / 1000 % 60);
                }
                if (start < 0 && t > 0) {
//            开抢后提示
                    //document.getElementById("time_txt").innerHTML="距离抢购结束还有 ";
                    //$(".day").hide();
                    document.getElementById("t_d").innerHTML = d;
                    document.getElementById("t_h").innerHTML = h;
                    document.getElementById("t_m").innerHTML = m;
                    document.getElementById("t_s").innerHTML = s;
                } else if (start > 0) {
//            未开抢提示
                    document.getElementById("t_d").innerHTML = Sd;
                    document.getElementById("t_h").innerHTML = Sh;
                    document.getElementById("t_m").innerHTML = Sm;
                    document.getElementById("t_s").innerHTML = Ss;
                }
            },
            set() {
                setInterval(this.GetRTime(), 1000);
            }

        },
        computed: {
            paramList() {
                const genericSpec = JSON.parse(this.spuDetail.genericSpec);
                const specialSpec = JSON.parse(this.seckill.sku.ownSpec);
                const paramsList = {};
                this.groups.forEach(a => {
                    a.params.forEach(b => {
                        paramsList[b.name] = genericSpec[b.id];
                        if (paramsList[b.name] == null) {
                            paramsList[b.name] = specialSpec[b.id];
                        }
                    })
                });
                return paramsList;
            }
        }
    })
</script>


<!--侧栏面板开始,由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div class="J-global-toolbar"></div>
<script type="text/javascript">$(".J-global-toolbar").load("side.html");</script>

<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4}</div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->


</html>